<template>
  <div>
    <el-card>
      <el-table :data="reportTable" style="width: 100%;margin-top:2px;">
        <el-table-column prop="empName" label="姓名" width="90"></el-table-column>
        <el-table-column prop="attendanceTime" label="月份" width="90"></el-table-column>
        <!-- <el-table-column prop="attendanceLevel" label="考勤得分" width="80"></el-table-column> -->
        <!-- <el-table-column prop="realSalary" label="出勤工资" width="90"></el-table-column> -->
        <el-table-column prop="shouldSalary" label="应发" width="70"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showReportDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="99%" class="abow_dialog">
      <el-form :model="templateForm" label-width="95px">
        <el-form-item label="姓名">
          <el-input v-model="templateForm.empName" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="考勤月份">
          <el-input v-model="templateForm.attendanceTime" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="应出勤天数">
          <el-input v-model="templateForm.workDays" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="打卡出勤">
          <el-input v-model="templateForm.daKaWorkDays" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="缺卡扣考勤">
          <el-input v-model="templateForm.noAttenCountToBeOneDay" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="迟到次数">
          <el-input v-model="templateForm.lateCount" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="迟到扣出勤">
          <el-input v-model="templateForm.lateCountToBeOneDay" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="矿工天数">
          <el-input v-model="templateForm.noWorkDays" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="考勤扣天数">
          <el-input v-model="templateForm.deduckDays" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="迟到扣钱">
          <el-input v-model="templateForm.lateSalary" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="实际出勤">
          <el-input v-model="templateForm.realWorkDays" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="基本工资">
          <el-input v-model="templateForm.baseSalary" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="出勤工资">
          <el-input v-model="templateForm.realSalary" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="绩效工资">
          <el-input v-model="templateForm.performanceSalary" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="绩效等级">
          <el-input v-model="templateForm.attendanceLevel" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="考勤系数">
          <el-input v-model="templateForm.attendanceLevelFactor" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="考勤工资">
          <el-input v-model="templateForm.attendanceSalary" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="工龄">
          <el-input v-model="templateForm.workAge" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="工龄工资">
          <el-input v-model="templateForm.workAgeMoeny" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="应发工资">
          <el-input v-model="templateForm.shouldSalary" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="是否全勤">
          <span>{{templateForm.isWorkAllDay?"是":'否'}}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      reportTable: null,
      code: null,
      corpId: null,
      userid: null,
      templateForm: {
        empName: null,
        workDays: null,
        daKaWorkDays: null,
        noAttenCountToBeOneDay: null,
        noAttenCountToBeOneDay: null,
        lateCount: null,
        lateCountToBeOneDay: null,
        noWorkDays: null,
        deduckDays: null,
        lateSalary: null,
        realWorkDays: null,
        baseSalary: null,
        realSalary: null,
        performanceSalary: null,
        attendanceLevel: null,
        attendanceLevelFactor: null,
        attendanceSalary: null,
        shouldSalary: null,
        isWorkAllDay: null
      },
      dialogVisible: false
    };
  },
  created: function() {
    this.getJsApiTeckit();
  },
  methods: {
    async getJsApiTeckit() {
      var result = await this.$httpd.get("/DingDingSecurity/GetJsapiTicket");
      if (result.status != 200) {
        this.$message.error("获取钉钉信息出错");
        return;
      }
      this.corpId = result.data.corpId;
      this.getCode(this.corpId);
    },
    //获取个人免登code
    getCode(corpId) {
      var that = this;
      that.$dd.ready(() => {
        that.$dd.runtime.permission.requestAuthCode({
          corpId: corpId, // 企业id
          onSuccess: function(info) {
            that.code = info.code;
            that.GetEmpId(that.code);
          }
        });
      });
    },
    async GetEmpId(code) {
      var result = await this.$httpd.get(
        `/EmpSalary/GetUserByCode?code=${code}`
      );
      if (result.status != 200) {
        this.$message.error("获取钉钉信息出错");
        return;
      }
      this.userid = result.data.userid;
      this.getAttReqporsByEmpId(this.userid);
    },
    async getAttReqporsByEmpId(eid) {
      var result = await this.$httpd.get(
        `/AttendanceReport/GetAttReqporsByEmpId?eid=${eid}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.reportTable = result.data.data;
    },
    showReportDetail(row) {
      this.dialogVisible = true;
      this.templateForm = row;
    }
  }
};
</script>